<template>
	<view>
		<!-- 
		 indicator-dots:是否显示指示点
		 indicator-color='rgba(0, 0, 0, .3)'-指示点颜色
		 indicator-active-color:当前选中的颜色
		 circular:是否衔接滑动
		 autoplay:是否自动切换
		 vertical:是否为终向滑动
		 -->
		<swiper 
				indicator-dots 
				indicator-color='rgba(255, 255, 255, .3)' 
				indicator-active-color='#ffffff' 
				circular 
				autoplay 
				interval='2000' 
				vertical>
			<swiper-item>111</swiper-item>
			<swiper-item>222</swiper-item>
			<swiper-item>333</swiper-item>
			<swiper-item>444</swiper-item>
		</swiper>
		<navigator url="/pages/index/index">跳转到首页</navigator>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
swiper {
	// vw:视图的宽度(100代表全屏)
	// vh:屏幕的可视区域(100就是全屏,50就是可视区域的一半)
	width: 100vw;
	height: 200px;
	border: 1px solid green;
	swiper-item {
		width: 100%;
		height: 100%;
		background: pink;
	}
	// css控制器(偶数张图)的css样式
	swiper-item:nth-child(2n) {
		background: orange;
	}
}
</style>
